<div class="col-xs-12" style="margin-top: 10px">
    <div class="row" style="padding-bottom: 12px">
        <form class="form-vertical" id="listMonitorForm" ng-keypress="enterPress($event)">
            <div class="row">
                <div class="alert {{alertType}} col-xs-12" ng-show="alertShow">
                    <strong>{{AlertMsg}}</strong>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10">
                    <label class="col-sm-1 control-label textRight">开始时间:</label>

                    <div class="col-sm-2">
                        <div class="input-group">
                            <input class="form-control date-picker" id="date_picker1" type="text"
                                   data-date-format="yyyy-mm-dd" ng-model="startDate" required>
                                        <span class="input-group-addon"> <i class="icon-calendar bigger-110"></i>
                                        </span>
                        </div>
                    </div>

                    <label class="col-sm-1 control-label textRight">任务状态:</label>

                    <div class="col-sm-2">
				        <span class="block input-icon input-icon-right">
					        <select name="executionCycle" class="width-100" ng-model="jobStatus"
                                    ng-options="status.ID as status.Text for status in executionStatusOptions"></select>
				        </span>
                    </div>
                    <label class="col-sm-1 control-label textRight">开发者:</label>

                    <div class="col-sm-2">
                        <span class="block input-icon input-icon-right">
					        <input type="text" ng-model="developer" placeholder="不限" title="支持模糊查询"
                                   class="width-100">
			            </span>
                    </div>


                </div>
                <div class="col-sm-2">
                    <button class="btn btn-primary btn-sm col-sm-12 width-80 " type="button" ng-click="submitSearch()"
                            ng-disabled="isLoading">
                        <i class="icon-search"></i>查询
                    </button>
                </div>
            </div>

            <div class="row" style="padding-top: 10px">
                <div class="col-sm-10">
                    <label class="col-sm-1 control-label textRight">结束时间:</label>

                    <div class="col-sm-2">
                        <div class="input-group">
                            <input class="form-control date-picker" id="date_picker2" type="text"
                                   data-date-format="yyyy-mm-dd" ng-model="endDate" required>
                                        <span class="input-group-addon"> <i class="icon-calendar bigger-110"></i>
                                        </span>
                        </div>
                    </div>

                    <label class="col-sm-1 control-label textRight">任务名/ID:</label>

                    <div class="col-sm-2">
				        <span class="block input-icon input-icon-right">
					        <input type="text" class="width-100" ng-model="taskId" placeholder="模糊查询">
				        </span>

                    </div>

                </div>


            </div>
        </form>
    </div>
</div>

<div class="col-xs-12 text-center" ng-show="isLoading">
    <div id="loading" class="loading " style="color: #000000;width: auto">载入中</div>
</div>

<div class="col-xs-12" ng-hide="hideTable">
    <div class="row" id="JobList">
        <div class="table-header">查询结果</div>
        <div class="table-responsive">

            <div class="dataTables_wrapper jobTooltip" role="grid">
                <div class="row">
                    <div class="col-sm-7">
                        <div class="dataTables_length">
                            <label>每页显示
                                <select ng-model="table.selectedRecordPerPage"
                                        ng-options="rpp for rpp in table.recordPerPageOptions" required>
                                </select> 条记录
                            </label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="dataTables_filter">
                            <label>过滤: <input type="text" ng-model="table.query"></label>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <label>是否预跑</label>
                        <label>
                            <input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox"
                                   ng-model="ifPreRun" ng-change="handleJobType()">
                            <span class="lbl"></span>
                        </label>
                    </div>

                </div>
                <table class="table table-striped table-bordered table-hover dataTable">
                    <thead>
                    <tr role="row">
                        <!--<th class=" width-10">任务实例ID</th>-->
                        <!--<th class="width-10">时间批次</th>-->
                        <!--<th>任务ID</th>-->
                        <!--<th class="width-20">任务名</th>-->
                        <!--<th>周期</th>-->
                        <!--<th>开发者</th>-->
                        <!--<th class="width10">状态</th>-->
                        <!--<th class="{{getSortingClass()}}" ng-click="reverse=!reverse">开始时间</th>-->
                        <!--<th>结束时间</th>-->
                        <!--<th class="width-20">操作</th>-->
                        <th class="{{table.getSortingClass('taskStatusId')}} width-10"
                            ng-click="table.predicate = 'taskStatusId'; table.reverse=!table.reverse">任务实例ID
                        </th>
                        <th class="width-10">时间批次</th>
                        <th class="{{table.getSortingClass('taskId')}}"
                            ng-click="table.predicate = 'taskId'; table.reverse=!table.reverse">任务ID
                        </th>
                        <th class="{{table.getSortingClass('taskName')}} width-20"
                            ng-click="table.predicate = 'taskName'; table.reverse=!table.reverse">任务名
                        </th>
                        <th class="{{table.getSortingClass('cycle')}}"
                            ng-click="table.predicate = 'cycle'; table.reverse=!table.reverse">周期
                        </th>
                        <th class="{{table.getSortingClass('owner')}}"
                            ng-click="table.predicate = 'owner'; table.reverse=!table.reverse">开发者
                        </th>
                        <th class="{{table.getSortingClass('priority')}}"
                            ng-click="table.predicate = 'priority'; table.reverse=!table.reverse">优先级
                        </th>
                        <th class="{{table.getSortingClass('status')}} width10"
                            ng-click="table.predicate = 'status'; table.reverse=!table.reverse">状态
                        </th>
                        <th class="{{table.getSortingClass('startTime')}}"
                            ng-click="table.predicate = 'startTime'; table.reverse=!table.reverse">开始时间
                        </th>
                        <th class="{{table.getSortingClass('endTime')}}"
                            ng-click="table.predicate = 'endTime'; table.reverse=!table.reverse">结束时间
                        </th>
                        <th class="width-20">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="jobInstance in table.displayedDataList.slice(table.startIndex-1, table.endIndex)">
                        <td style="word-break:break-all; word-wrap:break-word;">{{jobInstance.taskStatusId}}</td>
                        <td>{{getTimeid(jobInstance.taskStatusId,jobInstance.cycle)}}</td>
                        <td>{{jobInstance.taskId}}</td>
                        <td style="word-break:break-all; word-wrap:break-word;">{{jobInstance.taskName}}</td>
                        <td>
                            <span class="label {{getExecutionCycleLabel(jobInstance.cycle)}}">{{getCycleText(jobInstance.cycle)}}</span>
                        </td>
                        <td>{{jobInstance.owner}}</td>
                        <td>{{getProText(jobInstance.priority)}}</td>
                        <td>
                        <span class="tag statusFont text-center {{getStatusText(jobInstance.status)}}">
                        {{getStatusText(jobInstance.status)}}</span>
                        </td>
                        <td>{{jobInstance.startTime|date:"yyyy-MM-dd HH:mm:ss"}}</td>
                        <td>{{jobInstance.endTime|date:"yyyy-MM-dd HH:mm:ss"}}</td>
                        <td>
                            <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
                                <button class="btn-link blue" ng-click="instanceInfo($index)" tooltip-placement="top"
                                        tooltip="详细信息">
                                    <i class="icon-file-text bigger-130"></i>
                                    <span>查看日志</span>
                                </button>

                                <button class="btn-link green" ng-click="reRunJob($index)"
                                        tooltip-placement="top"
                                        tooltip="重跑">
                                    <i class="icon-play bigger-130"></i>
                                    <span>重跑</span>
                                </button>
                                <button class="btn-link red" ng-click="successJob($index)"
                                        tooltip-placement="top"
                                        tooltip="置为成功">
                                    <i class="icon-ok bigger-130"></i>
                                    <span>置为成功</span>
                                </button>
                                <button class="btn-link red" ng-click="showRelaTree($index)"
                                        tooltip-placement="top"
                                        tooltip="血缘树">
                                    <i class="icon-ok bigger-130"></i>
                                    <span>血缘树</span>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <!--<tr ng-repeat="jobInstance in jobInstanses|orderBy:'startTime':reverse" >-->
                    <!--<td style="word-break:break-all; word-wrap:break-word;">{{jobInstance.taskStatusId}}</td>-->
                    <!--<td>{{getTimeid(jobInstance.taskStatusId,jobInstance.cycle)}}</td>-->
                    <!--<td>{{jobInstance.taskId}}</td>-->
                    <!--<td style="word-break:break-all; word-wrap:break-word;">{{jobInstance.taskName}}</td>-->
                    <!--<td>-->
                    <!--<span class="label {{getExecutionCycleLabel(jobInstance.cycle)}}">{{getCycleText(jobInstance.cycle)}}</span>-->
                    <!--</td>-->
                    <!--<td>{{jobInstance.owner}}</td>-->
                    <!--<td>-->
                    <!--<span class="tag statusFont text-center {{getStatusText(jobInstance.status)}}">-->
                    <!--{{getStatusText(jobInstance.status)}}</span>-->
                    <!--</td>-->
                    <!--<td>{{jobInstance.startTime|date:"yyyy-MM-dd HH:mm:ss"}}</td>-->
                    <!--<td>{{jobInstance.endTime|date:"yyyy-MM-dd HH:mm:ss"}}</td>-->
                    <!--<td>-->
                    <!--<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">-->
                    <!--<button class="btn-link blue" ng-click="instanceInfo($index)" tooltip-placement="top"-->
                    <!--tooltip="详细信息">-->
                    <!--<i class="icon-file-text bigger-130"></i>-->
                    <!--<span>查看日志</span>-->
                    <!--</button>-->

                    <!--<button class="btn-link green" ng-click="reRunJob($index)"-->
                    <!--tooltip-placement="top"-->
                    <!--tooltip="重跑">-->
                    <!--<i class="icon-play bigger-130"></i>-->
                    <!--<span>重跑</span>-->
                    <!--</button>-->
                    <!--<button class="btn-link red" ng-click="successJob($index)"-->
                    <!--tooltip-placement="top"-->
                    <!--tooltip="置为成功">-->
                    <!--<i class="icon-ok bigger-130"></i>-->
                    <!--<span>置为成功</span>-->
                    <!--</button>-->
                    <!--<button class="btn-link red" ng-click="showRelaTree($index)"-->
                    <!--tooltip-placement="top"-->
                    <!--tooltip="血缘树">-->
                    <!--<i class="icon-ok bigger-130"></i>-->
                    <!--<span>血缘树</span>-->
                    <!--</button>-->
                    <!--&lt;!&ndash;<button class="btn-link green" ng-click="reRunJobCascaded($index)"&ndash;&gt;-->
                    <!--&lt;!&ndash;ng-show="(canReRun(jobInstance.status) && user.isAdmin)"&ndash;&gt;-->
                    <!--&lt;!&ndash;tooltip-placement="top" tooltip="级联重跑">&ndash;&gt;-->
                    <!--&lt;!&ndash;<i class="icon-exchange bigger-130"></i>&ndash;&gt;-->
                    <!--&lt;!&ndash;</button>&ndash;&gt;-->
                    <!--&lt;!&ndash;<button class="btn-link red" ng-click="successJob($index)"&ndash;&gt;-->
                    <!--&lt;!&ndash;ng-show="(canSuccess(jobInstance.status) && (user.isAdmin || user.pinyinName == jobInstance.owner))"&ndash;&gt;-->
                    <!--&lt;!&ndash;tooltip-placement="top"&ndash;&gt;-->
                    <!--&lt;!&ndash;tooltip="置为成功">&ndash;&gt;-->
                    <!--&lt;!&ndash;<i class="icon-ok bigger-130"></i>&ndash;&gt;-->
                    <!--&lt;!&ndash;</button>&ndash;&gt;-->

                    <!--&lt;!&ndash;<button class="btn-link yellow" ng-click="suspendJob($index)"&ndash;&gt;-->
                    <!--&lt;!&ndash;ng-show="(canSuspend(jobInstance.status) && (user.isAdmin || user.pinyinName == jobInstance.owner))"&ndash;&gt;-->
                    <!--&lt;!&ndash;tooltip-placement="top"&ndash;&gt;-->
                    <!--&lt;!&ndash;tooltip="挂起任务">&ndash;&gt;-->
                    <!--&lt;!&ndash;<i class="icon-pause bigger-130"></i>&ndash;&gt;-->
                    <!--&lt;!&ndash;</button>&ndash;&gt;-->

                    <!--&lt;!&ndash;<button class="btn-link yellow" ng-click="topologyShow($index)"&ndash;&gt;-->
                    <!--&lt;!&ndash;tooltip-placement="top"&ndash;&gt;-->
                    <!--&lt;!&ndash;tooltip="查看拓扑图">&ndash;&gt;-->
                    <!--&lt;!&ndash;<i class="icon-bar-chart bigger-130"></i>&ndash;&gt;-->
                    <!--&lt;!&ndash;</button>&ndash;&gt;-->

                    <!--&lt;!&ndash;<button class="btn-link yellow" ng-click="jobManage($index)"&ndash;&gt;-->
                    <!--&lt;!&ndash;tooltip-placement="top"&ndash;&gt;-->
                    <!--&lt;!&ndash;tooltip="任务管理">&ndash;&gt;-->
                    <!--&lt;!&ndash;<i class="icon-cog bigger-130"></i>&ndash;&gt;-->
                    <!--&lt;!&ndash;</button>&ndash;&gt;-->
                    <!--</div>-->
                    <!--</td>-->
                    <!--</tr>-->
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-sm-5">
                        <div class="dataTables_info">
                            展示第{{table.startIndex}}条记录至第{{table.endIndex}}条记录（总计{{table.total}}条记录）
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="dataTables_paginate paging_bootstrap">
                            <ul class="pagination">
                                <li class="{{table.getDisableLabelforPrevious()}}"><a href=""
                                                                                      ng-click="table.gotoFirstPage()"><i
                                        class="icon-double-angle-left"></i></a></li>
                                <li class="{{table.getDisableLabelforPrevious()}}"><a href=""
                                                                                      ng-click="table.previousPage()"><i
                                        class="icon-angle-left"></i></a></li>
                                <li ng-repeat="num in table.getCurrentPageNumDisplay()"
                                    class="{{table.getActiveLabel(num)}}">
                                    <a href="" ng-click="table.changePage(num)">{{num}}</a>
                                </li>
                                <li class="{{table.getDisableLabelforNext()}}"><a href="" ng-click="table.nextPage()"><i
                                        class="icon-angle-right"></i></a></li>
                                <li class="{{table.getDisableLabelforNext()}}"><a href=""
                                                                                  ng-click="table.gotoLastPage()"><i
                                        class="icon-double-angle-right"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <script type="text/javascript">
                    jQuery(function ($) {
                        $('#date_picker1').datepicker({autoclose: true}).next().on(ace.click_event, function () {
                            $(this).prev().focus();
                        });
                        $('#date_picker2').datepicker({autoclose: true}).next().on(ace.click_event, function () {
                            $(this).prev().focus();
                        });

                        $('#date_picker3').datepicker({autoclose: true}).next().on(ace.click_event, function () {
                            $(this).prev().focus();
                        });
                        $('#date_picker4').datepicker({autoclose: true}).next().on(ace.click_event, function () {
                            $(this).prev().focus();
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>